<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行客户分析可视化大屏</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="dashboard">
        <header>
            <h1>银行客户分析可视化大屏</h1>
            <div class="update-time">更新时间：<span id="updateTime"></span></div>
        </header>

        <div class="overview-cards">
            <div class="card" id="totalCustomers">
                <h3>总客户数</h3>
                <div class="number">-</div>
            </div>
            <div class="card" id="totalAssets">
                <h3>总资产规模</h3>
                <div class="number">-</div>
            </div>
            <div class="card" id="activeUsers">
                <h3>月活用户数</h3>
                <div class="number">-</div>
            </div>
        </div>

        <div class="charts-container">
            <div class="chart-wrapper">
                <div id="customerDistribution" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div id="customerBehavior" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div id="assetDistribution" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div id="marketingEffect" class="chart"></div>
            </div>
            <div class="chart-wrapper full-width">
                <div id="highValueCustomers" class="chart"></div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</body>
</html>
